<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>商品购物车</title>
    <link rel="shortcut icon" href="./../../favicon.ico">
    <link rel="stylesheet" href="../../style/cart/shoppingCart.css">
    <script type="text/javascript" src="./../../plugins/jQuery/jquery-3.6.0.js"></script>
    <script type="text/javascript" src="./../../plugins/vue/vue.js"></script>
    <script type="text/javascript" src="./../../plugins/axios/axios.js"></script>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="./../../plugins/element-ui/index.css">
    <!-- 引入组件库 -->
    <script src="./../../plugins/element-ui/index.js"></script>
    <!-- 引入layer -->
    <script src="../../plugins/layer-master/dist/layer.js"></script>
    <style>
        .el-table {
            margin: 0 auto;
        }
    </style>
</head>
<body>
<div id="app">
    <nav class="public-header">
        <a href="../../index.html">网站首页</a>
        <a href="">我的订单</a>
        <a href="">我的地址</a>
    </nav>
    <div class="cart">
        <template>
            <el-table
                    ref="multipleTable"
                    :data="cartItems"
                    tooltip-effect="dark"
                    style="width: 87%"
                    @selection-change="batchSelected"
            >
                <el-table-column
                        type="selection"
                        width="55"
                        align="center"
                >
                </el-table-column>
                <el-table-column
                        label="商品"
                        width="220"
                        align="center"
                >
                    <template slot-scope="scope">
                        <img width="120px" :src=`http:${scope.row.imageName}`>
                    </template>
                </el-table-column>
                <el-table-column
                        label="书名"
                        align="center"
                >
                    <template slot-scope="scope">
                        {{scope.row.bookName}}
                    </template>
                </el-table-column>
                <el-table-column
                        label="出版社"
                        align="center"
                >
                    <template slot-scope="scope">
                        {{scope.row.publisher}}
                    </template>
                </el-table-column>
                <el-table-column
                        prop="price"
                        label="单价"
                        width="120"
                        align="center"
                >
                    <template slot-scope="scope">￥{{ scope.row.price }}元</template>
                </el-table-column>
                <el-table-column
                        prop="number"
                        label="数量"
                        show-overflow-tooltip
                        align="center"
                        width="200px"
                >
                    <template slot-scope="scope">
                        <el-button size="mini" type="danger" @click="changeCartNumber(scope.row,-1)">-1</el-button>
                        <input type="text"
                               style="width: 50px; height: 23px"
                               v-model.number="scope.row.number"
                               @blur="changeCartNumber2(scope.row)"
                        >
                        <el-button size="mini" type="success" @click="changeCartNumber(scope.row,1)">+1</el-button>
                    </template>

                </el-table-column>
                <el-table-column
                        prop="address"
                        label="小计"
                        show-overflow-tooltip
                        align="center"
                        width="120"
                >
                    <template slot-scope="scope">￥{{ (scope.row.price * scope.row.number).toFixed(2) }}元</template>
                </el-table-column>
                <el-table-column
                        prop="address"
                        label="操作"
                        show-overflow-tooltip
                        align="center"
                        width="120"
                >
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                type="danger"
                                align="center"
                                @click="removeCart(scope.row.id)"
                        >删除
                        </el-button>
                    </template>
                </el-table-column>
            </el-table>
            <el-button type="danger"  @click="batchRemove"
                       class="dangers" v-if="cartItems.length > 0" id="batchDeleteBtn"
                      >批量删除
            </el-button>
            <div class="cart-btn"><span>总价：</span><span> ¥{{totalPrice}} </span>
                <button class="btn" @click="toPay">去结算</button>
            </div>
        </template>
        <!-- 页脚部分 -->
        <div class="extra">
            <div class="wrapper">
                <!-- 版权信息 -->
                <div class="copyright">
                    <p>
                        <a href="javascript:;">关于我们</a>
                        <a href="javascript:;">帮助中心</a>
                        <a href="javascript:;">售后服务</a>
                        <a href="javascript:;">配送与验收</a>
                        <a href="javascript:;">商务合作</a>
                        <a href="javascript:;">搜索推荐</a>
                        <a href="javascript:;">友情链接</a>
                    </p>
                    <p>CopyRight &copy; 湖北理工学院</p>
                </div>
            </div>
        </div>
    </div>
</div>

<script>
    const vm = new Vue({
        el: "#app",
        data: {
            userId: "",
            // 购物车列表
            cartItems: [],
            // 选中了的购物项列表
            selectedItemList: []
        },
        methods: {
           loadMyCartData(){
               axios({
                   method:'get',
                   url:'http://192.168.8.74:8001/cart/find',
                   headers:{
                       token:localStorage.getItem('front_token')
                   }
               }).then(resp=>{
                   this.cartItems=resp.data.data
               })
           },
            //对购物车数量进行操作
            changeCartNumber(row,number){
               if (row.number - 0 + number < 1){
                   this.$message({
                       message:'数量不能小于1',
                       type:'error'
                   });
                   return
               }
               axios({
                   method: 'put',
                   url :'http://192.168.8.74:8001/cart/chang_cart_number/'+row.id+'/'+number,
                    headers: {
                       token: localStorage.getItem('front_token')
                    }
               }).then(resp=>{
                   this.loadMyCartData()
               })
            },
            //对购物车数量进行操作
            changeCartNumber2(row){
                if (row.number-0<1){
                    this.$message({
                        message:'数量不能小于1',
                        type:'error'
                    });
                    return
                }
                axios({
                    method: 'put',
                    url:'http://192.168.8.74:8001/cart/chang_cart_number2/'+row.id+'/'+number,
                    headers: {
                        token: localStorage.getItem('front_token')
                    }
                }).then(resp=>{
                    this.loadMyCartData()
                })
            },
            //从购物车中删除指定图书
            removeCart(id){
               this.$confirm('此操作将永久删除该商品，是否继续？','提示',{
                   confirmButtonText:'确定',
                   cancelButtonText:'取消',
                   type:'warning'
               }).then(()=>{
                   //确定按钮
                   axios({
                       method:'delete',
                       url:'http://192.168.8.74:8001/cart/remove/'+id,
                       headers:{
                           token:localStorage.getItem('front_token')
                       }
                   }).then(resp=>{
                       this.loadMyCartData()
                   })
               }).catch(()=>{
                   //取消按钮
                   this.$message({
                       type:'info',
                       message:'已取消删除'
                   })
               });
            },
            //选中操作
            batchSelected(item){
               this.selectedItemList=item
            },
            //批量删除操作
            batchRemove(){
               this.$confirm('此操作将永久删除该商品，是否继续？','提示',{
                   confirmButtonText:'确定',
                   cancelButtonText:'取消',
                   type:'warning'
               }).then(()=>{
                   let str=''
                   for (let i =0;i<this.selectedItemList.length;i++){
                       str += 'ids=' +this.selectedItemList[i].id +'&'
                   }
                   str =str.substring(0,str.length-1)
                   console.log(str)
                   //确定按钮
                   axios({
                       method:'delete',
                       url:'http://192.168.8.74:8001/cart/batch_remove?'+str,
                       headers:{
                           token:localStorage.getItem('front_token')
                       }
                   }).then(resp=>{
                       this.loadMyCartData()
                   })
               }).catch(()=>{
                   //取消按钮
                   this.$message({
                       type:'info',
                       message:'已取消删除'
                   });
               });
            },
            //支付
            toPay(){
               let str=''
                for (let i=0;i<this.selectedItemList.length;i++){
                    str+='ids='+this.selectedItemList[i].id+'&'
                }
                str=str.substring(0,str.length-1)
                console.log(str)
                //确定按钮
                axios({
                    method:'get',
                    url:'http://192.168.8.74:8001/alipay/get_data?'+str,
                    headers:{
                        token:localStorage.getItem('front_token')
                    }
                }).then(resp=>{
                    //支付
                    location.href='http://192.168.8.74:8001/alipay/pay?total_amount='+this.totalPrice+'&subject='+this.selectedItemList[0].bookname
                })
            }
        },
        computed: {
            // 总价格
            totalPrice() {
                return this.selectedItemList.reduce((sum, item) => {
                    sum = parseFloat(sum);
                    let price = parseFloat(item.price);
                    let number = parseFloat(item.number);
                    sum += (price * number);
                    return sum.toFixed(2);
                }, 0);
            },
        },
        created() {
            this.loadMyCartData();
        }
    })
</script>
</body>
</html>
